<template>
    <div class="app-container">
      赛程列表
      <el-card class="operate-container" shadow="never">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="比赛队伍">
            <el-select v-model="searchObj.clueId" clearable placeholder="请选择">
              <el-option
                v-for="item in clueList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赛程时间">
            <el-date-picker v-model="searchObj.beginTime" placeholder="开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item label="-">
            <el-date-picker v-model="searchObj.endTime" placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="fetchData">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="default" @click="resetData">清空</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 工具按钮 -->
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets" style="margin-top: 5px"></i>
        <span style="margin-top: 5px">数据列表</span>
        <el-button class="btn-add" @click="add()" style="margin-left: 10px;">添加</el-button>
        <el-button class="btn-add" @click="batchRemove()" >批量删除</el-button>
      </el-card>
  
      <el-table :data="list" stripe border
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"/>
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="clueIdaName" label="赛程甲队" width="180" align="center"> </el-table-column>
        <el-table-column prop="clueIdbName" label="赛程乙队" width="180" align="center"> </el-table-column>
        <el-table-column prop="score" label="甲:乙" width="180" align="center"> </el-table-column>
        <el-table-column prop="matchTime" label="赛程时间" width="180" sortable align="center"> </el-table-column>
        <el-table-column prop="subscribeNum" label="赛程预约数" width="180"  align="center">
          <template slot-scope="scope">
            <el-tag :type="primary" :size="mini" disable-transitions>{{ scope.row.subscribeNum }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" sortable> </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="180" sortable> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="removeById(scope.row.id)">删除</el-button>
            <router-link :to="'/match/matchEdit/' + scope.row.id">
              <el-button type="text" size="mini">修改</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination :current-page="pageNum" :total="total" :page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" style="padding: 30px 0; text-align: center;"
        layout="total,sizes,prev, pager, next, jumper" @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </div>
  </template>
  <script>
  import matchApi from "@/api/match/match";
  import clueApi from "@/api/clue/clue";
  export default {
    data() {
      //初始值
      return {
        list: [], //列表
        clueList: [],
        total: 0, //总记录数
        pageNum: 1, //页码
        pageSize: 10, //每页记录数
        searchObj: {}, //查询条件
        multipleSelection: [], //批量删除选中的记录列表
      };
    },
    created() {
      //页面渲染之前
      this.fetchData();
      clueApi.getClueList()
      .then((response) =>{
        this.clueList = response.data
      })
    },
    methods: {//具体方法
      //批量删除
      batchRemove(){
        //判断非空
        if(this.multipleSelection.length===0){
          this.$message.warning('请选择要删除的记录！')
          return
        }
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var idList =[]
            //遍历数组
            this.multipleSelection.forEach(item => {
              idList.push(item.id)
            })
            matchApi.batchRemove(idList)
            .then((response) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新
              this.fetchData()
            })
          });
  
      },
      //复选框发生变化
      handleSelectionChange(selection){
        this.multipleSelection = selection
        console.log(this.multipleSelection)
      },
      //跳转到添加表单页面
      add(){
        this.$router.push({path:'/match/matchCreate'})
      },
  
      fetchData() {
        matchApi
          .pageList(this.pageNum, this.pageSize, this.searchObj)
          .then((response) => {
            this.list = response.data.records;
            this.total = response.data.total;
          });
      },
      //改变每页显示记录数
      changePageSize(size) {
        this.pageSize = size;
        this.fetchData();
      },
      //改变页码数
      changeCurrentPage(page) {
        this.pageNum = page;
        this.fetchData();
      },
  
      resetData() {
        this.searchObj = {}
        this.fetchData()
      },
      //删除单条信息
      removeById(id){
        this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            matchApi.removeMatchId(id)
            .then((response) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新
              this.fetchData()
            })
          });
      }
  
    },
  };
  </script>